<template>
  <div id="joinusintro">
    <div  class="join-lay">
      <div class="containerset">
          <ul class="tab">
            <li @click="tab(1)" v-bind:class="{active: num==1}">产品优势</li>
            <li @click="tab(2)" v-bind:class="{active: num==2}">业务范围</li>
            <li @click="tab(3)" v-bind:class="{active: num==3}">加盟流程</li>
            <a class="j_applyBtn"><el-button type="primary" @click="joinIn">我要加盟</el-button></a>
          </ul>
      </div>
    </div>

    <div class="layer layer-gray2" v-if="num == 1">
      <div class="containerset">
        <div class="lay-join">
          <div class="lay-title lay-title4">
            <div class="tit">产品优势</div>
          </div>
          <ul class="advantage">
            <li>
              <i class="icon fa fa-database"></i>
              <div class="text">综合费率低于其他工行代理产品，<br>利润空间大</div>
            </li>
            <li>
              <i class="icon fa fa-bank"></i>
              <div class="text">银行硬性要求条件低，拥有自主决<br>定权，避免流单，市场需求广</div>
            </li>
            <li>
              <i class="icon fa fa-credit-card"></i>
              <div class="text">车商佣金可以融入金融服务费，客<br>户还款压力小</div>
            </li>
            <li>
              <i class="icon fa fa-money"></i>
              <div class="text">可代收管理费</div>
            </li>
            <li>
              <i class="icon fa fa-gavel"></i>
              <div class="text">工商银行逾期客户扣车合法合理，<br>避免法律风险</div>
            </li>
            <li>
              <i class="icon fa fa-check-square-o"></i>
              <div class="text">初审1小时以内给结果，复审30分<br>钟内有结果</div>
            </li>
            <li>
              <i class="icon fa fa-gg"></i>
              <div class="text">APP查征信，车价评估<br>资料上传更方便，更高效</div>
            </li>
            <li>
              <i class="icon fa fa-car"></i>
              <div class="text">APP未来会形成一系列围绕汽车<br>的产品线，实现客户转介绍等被动<br>收益</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="layer layer-white" v-if="num == 2">
      <div class="containerset">
            <div class="hb-title lay-title4">服务机构全国分布</div>
            <div class="service-con">
              <div class="service-con-title">
                浙江省、安徽省、云南省、湖南省、山东省、福建省、广东省、四川省、湖北省、河南省、江西省、广西省、江苏省、上海市、
                陕西省、山西省、宁夏回族自治区、甘肃省、黑龙江省、吉林省、辽宁省、天津市、河北省、北京市、贵州省、重庆市、海南省、内蒙古等28省市。
              </div>
              <div class="service-con-img">
                <img src="../assets/map.png">
              </div>
          </div>
      </div>
    </div>

    <div class="layer layer-yellow" v-if="num == 3" >
      <div class="containerset">
        <div class="lay-join">
          <div class="lay-title lay-title3">
            <div class="tit">加盟流程</div>
          </div>
          <div class="flow"></div>
        </div>
      </div>
    </div>


    <dp-Foot></dp-Foot>
    <dp-Alert :share ="author" @menuopen="fooShare" :rCodeKey ="rCodeKey"></dp-Alert>
  </div>

</template>
<script>
  import Alert from './Alert.vue'
  export default {
    data() {
      return {
        num: 1,
        author:false,
        rCodeKey:''
      }
    },
    methods: {
      tab(index) {
        this.num = index;
      },
      joinIn(){
        this.author = !this.author;
        this.rCodeKey = Math.random().toFixed(2)*800
      },
      fooShare(...data){
        console.log(data)
        this.author = data[0]
      }
    },
    components:{
      'dp-Alert':Alert
    }
  };

</script>
<style>
  #joinusintro{
    width: 100%;
    min-width: 1200px;
  }

  .lay-title .tip {
    font-size: 14px;
    line-height: 20px;
    color: #999;
  }


  .banner, .layer {
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
  }

  .layer-white {
    background: #fff;
   }

  .layer-white-bg {
    background: url(../assets/join-lay1.png) no-repeat bottom center;
   }

  .lay-title .tit {
    font-size: 36px;
    line-height: 50px;
    color: #333;
  }

  .lay-title4 {
    padding: 80px 0 50px;
  }
  .lay-title {
    text-align: center;
  }

  .lay-join{
    width: 100%;
    min-width: 1200px;
  }

  .lay-join .partner {
    height: 360px;
    padding-top: 7px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .lay-join .partner>li {
    flex: 1;
    text-align: center;
  }

  .lay-join .partner>li>i {
    margin: 0 auto;
  }

  .banner>ul>li, .layer ul>li {
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
  }

  .lay-join .partner>li>.icon {
    display: block;
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
    color: #00b9ef;
  }


  .lay-join .partner>li>.tit {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
  }

  .lay-join .partner>li>.item {
    color: #666;
    line-height: 27px;
  }

  .layer-gray2 {
    background-color: #f9f7f4;
  }

  .lay-join.join-lay2 {
    background: url(../assets/join-lay2.png) no-repeat bottom center;
  }

  .lay-join .prospect {
    height: 391px;
    margin: auto;
    position: relative;
  }
  .lay-join .prospect .year {
    position: absolute;
    color: #333;
    line-height: 20px;
  }
  .lay-join .prospect .year2015 {
    left: 185px;
    top: 165px;
  }

  .lay-join .prospect .year2016 {
    left: 360px;
    top: 145px;
  }

  .lay-join .prospect .year2020 {
    left: 585px;
    top: -35px;
  }

  .lay-join .expect>li {
    width: 50%;
    float: left;
    overflow: hidden;
  }

  .lay-join .expect>li>.icon1 {
    background-position: 0 0;
  }

  .lay-join .expect {
    padding-top: 6px;
    height: 385px;
    margin: auto;
    overflow: hidden;
  }

  .lay-join .expect>li>.icon {
    display: block;
    float: left;
    margin-top: 60px;
    width: 215px;
    height: 188px;
    background: url(../assets/join-percent.png) no-repeat;
  }

  .lay-join .expect>li>.text {
    margin-left: 235px;
    width: 310px;
  }

  .lay-join .expect>li>.text .val {
    padding-bottom: 27px;
    font-size: 36px;
    font-weight: 700;
    color: #f39800;
  }

  .lay-join .expect>li>.text .tit {
    padding-bottom: 8px;
    font-size: 18px;
    color: #666;
  }

  .layer-gray2 {
    background-color: #f9f7f4;
  }

  .lay-join .advantage {
    overflow: hidden;
    height: 420px;
    margin: auto;
  }


  .lay-join .advantage>li>.icon {
    display: block;
    width: 80px;
    height: 80px;
    font-size: 60px;
    text-align: center;
    color: #00b9ef;
  }

  .lay-join .advantage>li>i {
    margin: 0 auto;
  }

  .lay-join .advantage>li>.icon2 {
    background-position: 0 -81px;
  }

  .lay-join .advantage>li>.icon3 {
    background-position: 0 -162px;
  }

  .lay-join .advantage>li>.icon4 {
    background-position: 0 -243px;
  }

  .lay-join .advantage>li>.icon5 {
    background-position: 0 -324px;
  }

  .lay-join .advantage>li>.icon6 {
    background-position: 0 -405px;
  }

  .lay-join .advantage>li>.icon7 {
    background-position: 0 -486px;
  }

  .lay-join .advantage>li>.icon8 {
    background-position: 0 -567px;
  }

  .lay-join .advantage>li {
    width: 25%;
    height: 175px;
    float: left;
  }

  .lay-join .advantage>li>.text {
    color: #666;
    line-height: 18px;
    text-align: center;
  }

  .lay-join .flow {
    width: 850px;
    margin: auto;
    height: 445px;
    background: url(../assets/join-lay5.png) no-repeat top center;
  }

  .lay-title3 {
    padding: 65px 0 40px;
  }

  .layer-yellow {
    background-color: #ebf5ff;
  }

  .lay-join .support {
    width: 1120px;
    overflow: hidden;
    margin: auto;
    padding-bottom: 20px
  }

  .lay-join .support .block {
    margin-left: -20px;
    margin-right: -20px
  }

  .lay-join .support .block .item {
    padding: 0 20px 40px;
    float: left;
    width: 290px
  }

  .lay-join .support .block .item .img {
    display: block;
    width: 290px;
    height: 145px;
    background: url(../assets/join-img.png) no-repeat;
    -webkit-border-radius: 15px 15px 0 0;
    -moz-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0
  }

  .lay-join .support .block .item .img-suggest {
    background-position: 0 0
  }

  .lay-join .support .block .item .img-guide {
    background-position: 0 -146px
  }

  .lay-join .support .block .item .img-train {
    background-position: 0 -292px
  }

  .lay-join .support .block .item .img-manpower {
    background-position: 0 -438px
  }

  .lay-join .support .block .item .img-manage {
    background-position: 0 -584px
  }

  .lay-join .support .block .item .img-commute {
    background-position: 0 -730px
  }

  .lay-join .support .block .item .img-build {
    background-position: 0 -876px
  }

  .lay-join .support .block .item .img-call {
    background-position: 0 -1022px
  }

  .lay-join .support .block .item .txt {
    height: 75px;
    background-color: #00b9ef;
    color: #fff;
    font-weight: 700;
    padding: 0 20px;
    -webkit-border-radius: 0 0 15px 15px;
    -moz-border-radius: 0 0 15px 15px;
    border-radius: 0 0 15px 15px
  }

  .lay-join .support .block .item .txt .tit {
    font-size: 18px;
    padding: 13px 0 2px
  }

  .j_applyBtn{
    display: block;
    padding-top: 8px;
    float: right;
  }

  .service-con {
    padding-bottom: 130px;
    min-width: 1200px;
  }

  .service-con .list {
    width: 400px;
    float: left;
    height: 360px;
    margin-top: 45px;
  }

  .service-con .list dl {
    padding-bottom: 20px;
  }

  .service-con .list dl dt {
    line-height: 36px;
    font-size: 16px;
    color: #666;
  }

  .service-con .list .title {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 15px;
    color: #f8b62b;
  }

  .service-con .service-con-title{
    float: left;
    width: 400px;
    line-height: 3;
  }

  .service-con .service-con-img{
    float: left;
    margin-left: 50px;
    width: 650px;
  }


</style>
